<template>
  <view class="flex-1 overflow-x-hidden">
		<view
		  class="px-5 flex flex-col flex-1"
		  v-if="settingInfo.switchCustom == 1"
		>
			<!-- #ifdef MP-WEIXIN -->
			<customNav title="我要定制"></customNav>
			<!-- #endif -->
			<view
				class="w-full relative -z-[10]"
				:style="{
					paddingTop: navHeight * 2 - systemInfo.statusBarHeight * 2 + 22 + 'rpx',
					marginTop: systemInfo.statusBarHeight * 2 + 'rpx',
				}"
			>
				<view class="pl-[38rpx]">
					<view class="text-black text-[48rpx]">定制包机</view>
					<view class="text-[#7B7B7B] text-xs leading-5 mt-2">
						<view>定制后我们的定制师将持续的为你</view>
						<view>关注适合你的优质方案</view>
					</view>
				</view>
				<image
					class="w-[584rpx] h-[584rpx] absolute -right-[140rpx] -top-[64rpx] -z-10"
					src="https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/fly/fly-5.png"
				></image>
			</view>
			<view class="px-5 mt-[104rpx]">
				<view class="bg-white rounded-xl p-5">
					<view class="flex justify-between items-center pb-[30rpx] bbb">
						<view class="text-[26rpx] text-[#4C4C4C]"> 行程类型 </view>
						<view class="flex items-center" @click="showTravel = true">
							<!-- 选择后字体颜色样式 #1A1C1E -->
							<view class="text-[26rpx]">
								<text v-if="showForm.travel_type" class="text-[#1A1C1E]">{{
									showForm.travel_type
								}}</text>
								<text class="text-[#AEB2BC]" v-else>请选择</text>
							</view>
							<image
								src="@/static/right-1.png"
								class="w-[30rpx] h-[30rpx] ml-2"
							></image>
						</view>
					</view>
					<view class="flex justify-between items-center pb-[30rpx] pt-5">
						<view class="text-[26rpx] text-[#4C4C4C]"> 预计出行人数 </view>
						<view class="flex items-center" @click="showPeople = true">
							<view class="text-[26rpx] text-[#AEB2BC]">
								<text class="text-[#1A1C1E]" v-if="form.person_total">
									{{ form.person_total }}
								</text>
								<text v-else class="text-[#AEB2BC]">请选择</text>
							</view>
							<image
								src="@/static/right-1.png"
								class="w-[30rpx] h-[30rpx] ml-2"
							></image>
						</view>
					</view>
					<!-- 不同日程 -->
					<view v-if="form.travel_type == 3">
						<template
							v-for="(item, index) in showForm.cCalendarList"
							:key="index + 'tt'"
						>
							<view
								class="flex items-center justify-between -mx-5 mb-4 mt-[30rpx]"
							>
								<view class="flex items-center">
									<image
										src="@/static/icon-5.png"
										class="w-[6rpx] h-[36rpx]"
									></image>
									<view class="text-main text-xl font-medium pl-[30rpx]"
										>第{{ index + 1 }}程</view
									>
								</view>
								<image
									v-if="index"
									class="w-5 h5 mr-5"
									mode="widthFix"
									@click="removeCalendar(index)"
									src="@/static/delete.png"
								></image>
							</view>
							<view class="flex justify-between items-center pb-[30rpx]">
								<view class="text-[26rpx] text-[#4C4C4C]"> 出行日期 </view>
								<view class="flex items-center" @click="cusChuxing(index)">
									<view class="text-[26rpx] text-[#AEB2BC]">
										<text class="text-[#1A1C1E]" v-if="item.start_date">
											{{ item.start_date }}
										</text>
										<text v-else class="text-[#AEB2BC]">请选择</text>
									</view>
									<image
										src="@/static/right-1.png"
										class="w-[30rpx] h-[30rpx] ml-2"
									></image>
								</view>
							</view>
							<view class="flex justify-between items-center pb-[30rpx]">
								<view class="text-[26rpx] text-[#4C4C4C]"> 出发城市 </view>
								<view class="flex items-center" @click="openCity('start', index)">
									<view class="text-[26rpx]">
										<text
											class="text-[#1A1C1E]"
											v-if="showForm.cCalendarList[index].start_area_id"
										>
											{{ showForm.cCalendarList[index].start_area_name }}
										</text>
										<text v-else class="text-[#AEB2BC]">请选择</text></view
									>
									<image
										src="@/static/right-1.png"
										class="w-[30rpx] h-[30rpx] ml-2"
									></image>
								</view>
							</view>
							<view class="flex justify-between items-center pb-[30rpx] bbb">
								<view class="text-[26rpx] text-[#4C4C4C]"> 到达城市 </view>
								<view class="flex items-center" @click="openCity('end', index)">
									<view class="text-[26rpx]">
										<text
											class="text-[#1A1C1E]"
											v-if="showForm.cCalendarList[index].end_area_id"
										>
											{{ showForm.cCalendarList[index].end_area_name }}
										</text>
										<text v-else class="text-[#AEB2BC]">请选择</text></view
									>
									<image
										src="@/static/right-1.png"
										class="w-[30rpx] h-[30rpx] ml-2"
									></image>
								</view>
							</view>
						</template>
						<view class="pb-5 bbb">
							<view
								@click="addCalendar"
								class="w-full h-[84rpx] leading-[84rpx] text-center bg-theme rounded text-white text-base flex items-center justify-center"
							>
								<up-icon name="plus" color="#ffffff" size="14"></up-icon>
								<text class="pl-[18rpx]">再加一程</text>
							</view>
						</view>
					</view>
					<view v-else>
						<view class="flex justify-between items-center pb-[30rpx]">
							<view class="text-[26rpx] text-[#4C4C4C]"> 出行日期 </view>
							<view
								class="flex items-center"
								@click="aCalendarShow = true"
								v-if="form.travel_type == 1"
							>
								<view class="text-[26rpx]">
									<text
										class="text-[#1A1C1E]"
										v-if="showForm.aCalendarList[0].start_date"
									>
										{{ showForm.aCalendarList[0].start_date }}
									</text>
									<text v-else class="text-[#AEB2BC]">请选择</text>
								</view>
								<image
									src="@/static/right-1.png"
									class="w-[30rpx] h-[30rpx] ml-2"
								></image>
							</view>
							<view
								class="flex items-center"
								@click="bCalendarShow = true"
								v-else-if="form.travel_type == 2"
							>
								<view class="text-[26rpx]">
									<text
										class="text-[#1A1C1E]"
										v-if="showForm.bCalendarList[0].start_date"
									>
										{{ showForm.bCalendarList[0].start_date }} -
										{{ showForm.bCalendarList[0].end_date }}
									</text>
									<text v-else class="text-[#AEB2BC]">请选择</text>
								</view>
								<image
									src="@/static/right-1.png"
									class="w-[30rpx] h-[30rpx] ml-2"
								></image>
							</view>
							<view
								class="flex items-center"
								@click="aCalendarShow = true"
								v-else
							>
								<view class="text-[26rpx]">
									<text
										class="text-[#1A1C1E]"
										v-if="showForm.aCalendarList[0].start_date"
									>
										{{ showForm.aCalendarList[0].start_date }}
									</text>
									<text v-else class="text-[#AEB2BC]">请选择</text>
								</view>
								<image
									src="@/static/right-1.png"
									class="w-[30rpx] h-[30rpx] ml-2"
								></image>
							</view>
						</view>
						<template v-if="form.travel_type == 1 || form.travel_type == ''">
							<view class="flex justify-between items-center pb-[30rpx]">
								<view class="text-[26rpx] text-[#4C4C4C]"> 出发城市 </view>
								<view class="flex items-center" @click="openCity('start')">
									<view class="text-[26rpx]">
										<text
											class="text-[#1A1C1E]"
											v-if="showForm.aCalendarList[0].start_area_id"
										>
											{{ showForm.aCalendarList[0].start_area_name }}
										</text>
										<text v-else class="text-[#AEB2BC]">请选择</text>
									</view>
									<image
										src="@/static/right-1.png"
										class="w-[30rpx] h-[30rpx] ml-2"
									></image>
								</view>
							</view>
							<view class="flex justify-between items-center pb-[30rpx] bbb">
								<view class="text-[26rpx] text-[#4C4C4C]"> 到达城市 </view>
								<view class="flex items-center" @click="openCity('end')">
									<view class="text-[26rpx]">
										<text
											class="text-[#1A1C1E]"
											v-if="showForm.aCalendarList[0].end_area_id"
										>
											{{ showForm.aCalendarList[0].end_area_name }}
										</text>
										<text v-else class="text-[#AEB2BC]">请选择</text>
									</view>
									<image
										src="@/static/right-1.png"
										class="w-[30rpx] h-[30rpx] ml-2"
									></image>
								</view>
							</view>
						</template>
						<template v-else>
							<view class="flex justify-between items-center pb-[30rpx]">
								<view class="text-[26rpx] text-[#4C4C4C]"> 出发城市 </view>
								<view class="flex items-center" @click="openCity('start')">
									<view class="text-[26rpx]">
										<text
											class="text-[#1A1C1E]"
											v-if="showForm.bCalendarList[0].start_area_id"
										>
											{{ showForm.bCalendarList[0].start_area_name }}
										</text>
										<text v-else class="text-[#AEB2BC]">请选择</text>
									</view>
									<image
										src="@/static/right-1.png"
										class="w-[30rpx] h-[30rpx] ml-2"
									></image>
								</view>
							</view>
							<view class="flex justify-between items-center pb-[30rpx] bbb">
								<view class="text-[26rpx] text-[#4C4C4C]"> 到达城市 </view>
								<view class="flex items-center" @click="openCity('end')">
									<view class="text-[26rpx]">
										<text
											class="text-[#1A1C1E]"
											v-if="showForm.bCalendarList[0].end_area_id"
										>
											{{ showForm.bCalendarList[0].end_area_name }}
										</text>
										<text v-else class="text-[#AEB2BC]">请选择</text>
									</view>
									<image
										src="@/static/right-1.png"
										class="w-[30rpx] h-[30rpx] ml-2"
									></image>
								</view>
							</view>
						</template>
					</view>
					<view class="flex justify-between items-center pb-[30rpx] pt-5">
						<view class="text-[26rpx] text-[#4C4C4C]"> 价格预算 </view>
						<view class="flex items-center" @click="showPrice = true">
							<view class="text-[26rpx]">
								<text class="text-[#1A1C1E]" v-if="form.price_budget">
									{{ form.price_budget }}
								</text>
								<text v-else class="text-[#AEB2BC]">请选择</text>
							</view>
							<image
								src="@/static/right-1.png"
								class="w-[30rpx] h-[30rpx] ml-2"
							></image>
						</view>
					</view>
					<view class="flex justify-between items-center pb-[30rpx]">
						<view class="text-[26rpx] text-[#4C4C4C]"> 弹性日期 </view>
						<view class="flex items-center" @click="showDate = true">
							<view class="text-[26rpx]">
								<text v-if="form.flex_date" class="text-[#1A1C1E]">
									{{ showForm.flex_date }}
								</text>
								<text v-else class="text-[#AEB2BC]"> 请选择 </text>
							</view>
							<image
								src="@/static/right-1.png"
								class="w-[30rpx] h-[30rpx] ml-2"
							></image>
						</view>
					</view>
					<view class="flex justify-between items-center">
						<view class="text-[26rpx] text-[#4C4C4C]"> 机型偏好 </view>
						<view class="flex items-center" @click="showAir = true">
							<view class="text-[26rpx]">
								<text v-if="form.plane_like" class="text-[#1A1C1E]">
									{{ showForm.plane_like }}
								</text>
								<text v-else class="text-[#AEB2BC]"> 请选择 </text>
							</view>
							<image
								src="@/static/right-1.png"
								class="w-[30rpx] h-[30rpx] ml-2"
							></image>
						</view>
					</view>
				</view>

				<view class="bg-white rounded-xl p-5 mt-3">
					<view class="mb-[30rpx]">
						<view class="pb-[20rpx] text-[#4B535A] text-base"
							><text class="text-[#F62427] text-base">* </text> 联系人</view
						>
						<up-input
							:customStyle="customStyle"
							placeholder="请输入联系人"
							border="surround"
							clearable
							v-model="form.contactor"
						></up-input>
					</view>
					<view class="mb-[30rpx]">
						<view class="pb-[20rpx] text-[#4B535A] text-base"
							><text class="text-[#F62427] text-base">* </text>联系电话</view
						>
						<up-input
							type="number"
							:customStyle="customStyle"
							placeholder="请输入联系电话"
							border="surround"
							clearable
							v-model="form.phone"
						></up-input>
					</view>
					<view class="">
						<view class="pb-[20rpx] text-[#4B535A] text-base">备注信息</view>
						<up-textarea
							:show-confirm-bar="false"
							height="100"
							placeholder="请输入备注信息"
							border="surround"
							v-model="form.note"
						></up-textarea>
					</view>
				</view>
			</view>
			<view class="w-full px-5 pt-10 pb-10">
				<view
					@click="submit"
					class="bg-theme rounded w-full font-medium text-lg text-white h-[90rpx] leading-[90rpx] text-center"
				>
					立即定制
				</view>
			</view>
			<up-overlay :show="show">
				<view
					class="flex flex-col items-center h-full justify-center pb-10"
					@click.stop
				>
					<view
						class="w-[530rpx] h-[718rpx] bg-white rounded-[20rpx] pt-[56rpx] px-5 pb-6 flex flex-col items-center"
					>
						<view class="font-medium text-base text-black">定制成功</view>
						<view
							class="text-xs text-[#4C4C4] leading-5 text-center px-1 mt-[30rpx]"
						>
							<view>当航线有优资包机方案时， </view>
							<view>我们的工作人员将尽快与您联系 （北京时间9:00-20：00）</view>
							<view> 也可通过下方微信二维码添加工作人员。</view>
						</view>
						<image
							show-menu-by-longpress
							src="@/static/wechat.png"
							class="w-[360rpx] h-[360rpx]"
						></image>
						<view class="text-[#858585] text-base leading-4 mt-2"
							>长按识别二维码</view
						>
					</view>
					<image
						@click="goBack"
						src="@/static/close.png"
						class="w-8 h-8 mt-5"
					></image>
				</view>
			</up-overlay>
			<up-action-sheet
				:actions="listDate"
				title="弹性日期"
				:show="showDate"
				cancelText="取消"
				@select="(e) => handleSelect(e, 'flex_date')"
				@close="showDate = false"
			></up-action-sheet>
			<up-action-sheet
				:actions="listAir"
				title="机型偏好"
				:show="showAir"
				cancelText="取消"
				@select="(e) => handleSelect(e, 'plane_like')"
				@close="showAir = false"
			></up-action-sheet>
			<up-action-sheet
				:actions="travelList"
				title="行程类型"
				:show="showTravel"
				cancelText="取消"
				@select="(e) => handleSelect(e, 'travel_type')"
				@close="showTravel = false"
			></up-action-sheet>
			<up-calendar
				@close="aCalendarShow = false"
				:show="aCalendarShow"
				@confirm="(e) => handleSelect(e, 0)"
			></up-calendar>
			<up-calendar
				@close="bCalendarShow = false"
				:show="bCalendarShow"
				mode="range"
				@confirm="(e) => handleSelect(e, 1)"
			></up-calendar>
			<up-calendar
				@close="cCalendarShow = false"
				:show="cCalendarShow"
				@confirm="(e) => handleSelect(e, 2)"
			></up-calendar>
			<up-popup
				:closeOnClickOverlay="false"
				:show="showArea"
				@close="showArea = false"
				:round="12"
			>
				<customCity
					@choose="handleChooseCity"
					v-model:show="showArea"
				></customCity>
			</up-popup>
			<u-modal
				:show="showPeople"
				title="出行人数"
				showCancelButton
				@cancel="showPeople = false"
				@confirm="() => hadlePriceAndPeople(0)"
			>
				<view class="px-3 w-full">
					<view class="w-full">
						<up-input
							:customStyle="customStyle"
							placeholder="请输入出行人数"
							border="surround"
							v-model="showForm.person_total"
							type="number"
						></up-input>
					</view>
				</view>
			</u-modal>
			<u-modal
				:show="showPrice"
				title="价格预算（单位：万）"
				showCancelButton
				@cancel="showPrice = false"
				@confirm="() => hadlePriceAndPeople(1)"
			>
				<view class="px-3 w-full">
					<view class="w-full">
						<up-input
							:customStyle="customStyle"
							placeholder="请输入价格预算"
							border="surround"
							v-model="showForm.price_budget"
							type="number"
						></up-input>
					</view>
				</view>
			</u-modal>
			</view>
			<view v-else class="w-full flex-1 h-full flex flex-col bg-white">
			  <image
			    class="w-full"
			    mode="widthFix"
			    src="https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/222.jpg"
			  ></image>
			</view>
  </view>
</template>

<script setup lang="ts">
import { saveCustomQuote_api, getInCity_api } from "@/api/index.js";
import { ref, reactive, computed } from "vue";
import { onPageScroll } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const settingInfo = computed(() => userStore.setting);
onPageScroll((e) => {});
const customStyle = computed(() => ({
  height: "84rpx",
}));

const showPeople = ref(false);
const showPrice = ref(false);
const showArea = ref(false);
const show = ref(false);
const showDate = ref(false);
const showAir = ref(false);
const showTravel = ref(false);
const aCalendarShow = ref(false);
const bCalendarShow = ref(false);
const cCalendarShow = ref(false);

const form = reactive({
  contactor: "",
  phone: "",
  note: "",
  travel_type: "",
  person_total: "",
  price_budget: "",
  flex_date: "",
  plane_like: "",
  travels: [],
});
const showForm = reactive({
  travel_type: "",
  flex_date: "",
  plane_like: "",
  person_total: "",
  price_budget: "",
  aCalendarList: [
    //成都到北京
    {
      start_date: "",
      end_date: "",
      start_area_id: "",
      end_area_id: "",
      start_area_name: "",
      end_area_name: "",
    },
  ],
  bCalendarList: [
    //成都到毕节
    {
      start_date: "",
      end_date: "",
      start_area_id: "",
      end_area_id: "",
      start_area_name: "",
      end_area_name: "",
    },
  ],
  cCalendarList: [
    //深圳到成都
    {
      start_date: "",
      end_date: "",
      start_area_id: "",
      end_area_id: "",
      start_area_name: "",
      end_area_name: "",
    },
    {
      start_date: "",
      end_date: "",
      start_area_id: "",
      end_area_id: "",
      start_area_name: "",
      end_area_name: "",
    },
  ],
});

const listDate = ref([
  {
    name: "±3日",
    value: 1,
  },
  {
    name: "±7日",
    value: 2,
  },
  {
    name: "±15日",
    value: 3,
  },
]);
const listAir = ref([
  {
    name: "不限",
    value: 1,
  },
  {
    name: "小型飞机",
    subname: "适合1-5人",
    value: 2,
  },
  {
    name: "中大型飞机",
    subname: "适合6-10人",
    value: 3,
  },
  {
    name: "超远程飞机",
    subname: "适合11-18人",
    value: 4,
  },
  {
    name: "超大型飞机",
    subname: "适合19人及以上",
    value: 5,
  },
]);

const travelList = ref([
  {
    name: "单程",
    value: 1,
  },
  {
    name: "往返",
    value: 2,
  },
  {
    name: "多程",
    value: 3,
  },
]);

const temIdx = ref(0);
const handleSelect = (e, type) => {
  console.log(e, type);
  if (type === 0) {
    showForm.aCalendarList[0].start_date = e[0].replace(/-/g, "/");
    aCalendarShow.value = false;
    return;
  }
  if (type === 1) {
    showForm.bCalendarList[0].start_date = e[0].replace(/-/g, "/");
    showForm.bCalendarList[0].end_date = e[e.length - 1].replace(/-/g, "/");
    bCalendarShow.value = false;
    return;
  }
  if (type === 2) {
    showForm.cCalendarList[temIdx.value].start_date = e[0].replace(/-/g, "/");
    cCalendarShow.value = false;
    return;
  }
  if (type == "plane_like") {
    form.plane_like = e.value;
    showForm.plane_like = e.name;
    return;
  }
  if (type == "flex_date") {
    form.flex_date = e.value;
    showForm.flex_date = e.name;
    return;
  }
  if (type == "travel_type") {
    form.travel_type = e.value;
    showForm.travel_type = e.name;
    return;
  }
};

const cusChuxing = (index) => {
  cCalendarShow.value = true;
  temIdx.value = index;
};

const addCalendar = () => {
  showForm.cCalendarList.push({
    start_date: "",
    end_date: "",
    start_area_id: "",
    end_area_id: "",
    start_area_name: "",
    end_area_name: "",
  });
};

const cityStatus = ref("");
const openCity = (type, index) => {
  showArea.value = true;
  cityStatus.value = type;
  if (form.travel_type == 3) {
    temIdx.value = index;
  }
};
const handleChooseCity = (e) => {
  console.log(e);
  const { city_shortname = "", id, airport_shortname = "" } = e;
  if (form.travel_type == 1 || form.travel_type == "") {
    if (cityStatus.value == "start") {
      showForm.aCalendarList[0].start_area_id = id;
      showForm.aCalendarList[0].start_area_name =
        city_shortname || airport_shortname;
    } else {
      showForm.aCalendarList[0].end_area_id = id;
      showForm.aCalendarList[0].end_area_name =
        city_shortname || airport_shortname;
    }
    return;
  }
  if (form.travel_type == 2) {
    if (cityStatus.value == "start") {
      showForm.bCalendarList[0].start_area_id = id;
      showForm.bCalendarList[0].start_area_name =
        city_shortname || airport_shortname;
    } else {
      showForm.bCalendarList[0].end_area_id = id;
      showForm.bCalendarList[0].end_area_name =
        city_shortname || airport_shortname;
    }
    return;
  }
  if (form.travel_type == 3) {
    if (cityStatus.value == "start") {
      showForm.cCalendarList[temIdx.value].start_area_id = id;
      showForm.cCalendarList[temIdx.value].start_area_name =
        city_shortname || airport_shortname;
    } else {
      showForm.cCalendarList[temIdx.value].end_area_id = id;
      showForm.cCalendarList[temIdx.value].end_area_name =
        city_shortname || airport_shortname;
    }
    return;
  }
  console.log(showForm.aCalendarList);
};

const removeCalendar = (index) => {
  showForm.cCalendarList.splice(index, 1);
};

const hadlePriceAndPeople = (type) => {
  if (type) {
    if (!showForm.price_budget) return uni.$u.toast("请输入");
    form.price_budget = showForm.price_budget;
    showPrice.value = false;
    showForm.price_budget = "";
  } else {
    if (!showForm.person_total) return uni.$u.toast("请输入");
    form.person_total = showForm.person_total;
    showPeople.value = false;
    showForm.person_total = "";
  }
};

const submit = () => {
  if (!form.contactor)
    return uni.showToast({ title: "请输入联系人", icon: "none" });
  if (!form.phone)
    return uni.showToast({ title: "请输入联系电话", icon: "none" });
  if (form.phone && !uni.$u.test.mobile(form.phone))
    return uni.showToast({ title: "请输入正确的手机号", icon: "none" });

  uni.showLoading();
  saveCustomQuote_api({
    ...form,
    travels:
      form.travel_type == 1
        ? showForm.aCalendarList
        : form.travel_type == 2
        ? showForm.bCalendarList
        : showForm.cCalendarList,
  })
    .then(() => {
      show.value = true;
    })
    .finally(() => {
      uni.hideLoading();
    });
};

const goBack = () => {
  show.value = false;
  uni.navigateBack();
};

const systemInfo = uni.getSystemInfoSync();
// #ifdef MP
// 获取胶囊按钮位置信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// 计算导航栏高度（状态栏高度 + 胶囊按钮高度 + 上下边距）
const navHeight =
  menuButtonInfo.bottom + menuButtonInfo.top - systemInfo.statusBarHeight;
// #endif
</script>

<style lang="scss" scoped>
.bbb {
  border-bottom: 2rpx solid #f7f7f7;
}
:deep(.u-border) {
  border-color: #eceff4 !important;
}
:deep(.u-tabs__wrapper__nav__item) {
  padding-left: 60rpx !important;
  padding-right: 60rpx !important;
}

.many {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
</style>
